<!DOCTYPE html>
<html>

<head>
  <title>Map</title>
  <script src="d3.min.js"></script>
  <script src="d3-v6-tip.js"></script>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="d3.layout.cloud.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <link rel="stylesheet" href="d3-tip.css">
  <!-- Bootstrap Styles-->
  <link href="assets/css/bootstrap.css" rel="stylesheet" />
  <!-- FontAwesome Styles-->
  <link href="assets/css/font-awesome.css" rel="stylesheet" />
  <!-- Morris Chart Styles-->
  <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
  <!-- Custom Styles-->
  <link href="assets/css/custom-styles.css" rel="stylesheet" />
  <!-- Google Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

</head>

<body>
  <script src="./d3.min.js"></script>
  <div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">高管宝典</a>
        </div>  
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="active-menu" href="index.html"><i class="fa fa-dashboard"></i> 概览</a>
                </li>
                <li>
                    <a href="race.html?feature=degree"><i class="fa fa-desktop"></i> 时间追逐柱状图 </a>
                </li>
      <li>
                    <a href="statistics.html?feature=age,salary"><i class="fa fa-bar-chart-o"></i> 多因素统计 </a>
                </li>
                <li>
                    <a href="personal.html?name=张锡康"><i class="fa fa-search"></i> 个人搜索 </a>
                </li>
                <li>
                    <a href="map.html"><i class="fa fa-arrows"></i> 关系映射图 </a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">

          <div class="row">
            <div class="col-md-12">
                <h1 class="page-header">
                    关系映射图 <small>可视化高维多元数据</small>
                </h1>
            </div>
        </div>
  <svg width="1000" height="800" id="mainsvg" class="svgs"></svg>
  <script>
      feature = window.location.search.split("=")[1];
      const svg = d3.select('svg');
      width = svg.attr('width');
      height = svg.attr('height');
      const margin = {top: 40, right: 30, bottom: 60, left: 50};
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      width = innerWidth
      height = innerHeight
      const mainGroup = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    // set the dimensions and margins of the graph
    // Parse the Data
    brushHeight = 50
    deselectedColor = "#ddd"
    colors = d3.interpolateBrBG
    selectedLineColor = "steelblue"
    
    data = d3.csv("split_people_info.csv").then(
      function(data)
      {
        keys = data.columns.slice(1)
        data = data.slice(1, 500)
        //keys need to be changed: economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year

        // Populate the select with options
        
        var groups = {
          "institute": ["清华大学", "北京大学", "上海交大", "浙江大学", "复旦大学", "中国科学技术大学", "中国人民大学", "上海财经大学", "厦门大学", "武汉大学", "中南财经政法大学", "中央财经大学", "中山大学", "南京大学", "中科院"],
          "degree": ["博士", "硕士", "本科", "大专", "中专及以下"],
          "department": ["会计专业", "法律专业", "经济专业", "金融专业", "工商管理专业", "经济管理专业"],
          "salary": ["0-3万", "3万-10万", "10万-20万", "20万-50万", "50万-100万", "100万-200万", "200万-500万", "500万-INF"],
          "age": ["20-30岁", "31-40岁", "41-50岁", "51-60岁", "61-70岁", "71-100岁"]
        };
        label = d => d.uid
        x = new Map(Array.from(keys, key => [key, d3.scaleBand().domain(groups[key]).range([0, innerWidth])]))
        console.log(x.get("age")("20-30岁"))
        console.log(x.get("age")("20-30岁"))
        console.log(x.get("age")("20-30岁"))
        console.log(x.get("age")("20-30岁"))
        console.log(x.get("age")("20-30岁"))
        
        y = d3.scalePoint(keys, [0, height])

        line = d3.line()
        .defined(([, value]) => value != null)
        .x(([key, value]) => x.get(key)(value) + x.get(key).bandwidth() / 2)
        .y(([key]) => y(key))

        const brush = d3.brushX()
            .extent([
              [0, -(brushHeight / 2)],
              [innerWidth, brushHeight / 2]
            ])
            .on("start brush end", brushed);

        const path = mainGroup.append("g")
            .attr("fill", "none")
            .attr("stroke-width", 1.5)
            .attr("stroke-opacity", 0.4)
            .attr("class", "parallelPath")
          .selectAll("path")
          .data(data)
          .join("path")
            .attr("stroke", selectedLineColor)
            .attr("d", d => 
            {     
                return line(d3.cross(keys, [d], (key, d) => {
                  // console.log('Debug:', key, d[key], x.get(key)(d[key])); // 添加调试日志
                  return [key, d[key]];
            }))});

        path.append("title")
            .text(label);

        mainGroup.append("g")
          .selectAll("g")
          .data(keys)
          .join("g")
            .attr("transform", d => `translate(0,${y(d)})`)
            .each(function(d) { d3.select(this).call(d3.axisBottom(x.get(d)));})
            .call(g => g.append("text")
              .attr("x", 0)
              .attr("y", -6)
              .attr("text-anchor", "start")
              .attr("fill", "currentColor")
              .text(d => d))
            .call(g => g.selectAll("text")
              .clone(true).lower()
              .attr("fill", "none")
              .attr("stroke-width", 5)
              .attr("stroke-linejoin", "round")
              .attr("stroke", "white"))
            .call(brush);

        const selections = new Map();

        function brushed({selection}, key) {
          function bandsInInterval(scale, interval) {
            const [x1, x2] = interval;
            bands= scale.domain().filter(d => {
              const center = scale(d) + scale.bandwidth() / 2;
              return center >= x1 && center <= x2;
            });
            if (bands.length === 0) {
              return [-1, -1];
            }
            console.log(bands)
            const firstBandLeft = scale(bands[0]);
            const lastBandRight = scale(bands[bands.length - 1]);

            return [firstBandLeft, lastBandRight];
          }
          console.log(selection)
          console.log(key)
          if (selection === null) selections.delete(key);
          else selections.set(key, bandsInInterval(x.get(key), selection));
          print
          const selected = [];
          path.each(function(d) {
            const active = Array.from(selections).every(([key, [min, max]]) => x.get(key)(d[key]) >= min && x.get(key)(d[key]) <= max);
            d3.select(this).style("stroke", active ? selectedLineColor : deselectedColor);
            if (active) {
              d3.select(this).raise();
              selected.push(d);
            }
          });
          mainGroup.property("value", selected).dispatch("input");
        }
      }
    )
    </script>
</body>

</html>